<template>
  <div class="app">
    <div ref="searchBar" class="search-bar">
      <el-form :model="searchData" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="任务名称" style="margin-bottom: 5px;">
              <el-input v-model="searchData.taskName" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="任务状态" style="margin-bottom: 5px;">
              <el-select v-model="searchData.taskSubStatus" size="medium" class="select">
                <el-option
                  v-for="item in taskSubStatusOption"
                  :key="item.index"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="任务时间" style="margin-bottom: 5px;">
              <el-date-picker class="select" v-model="searchData.applyDate" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" size="medium"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-top: 4px;" :xs="12" :sm="12" :md="6">
            <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh-left" size="small" @click="handleClear">重置</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="申请公司" style="margin-bottom: 5px;">
              <el-input v-model="searchData.applyCompany" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="任务来源" style="margin-bottom: 5px;">
              <el-select v-model="searchData.resource" placeholder="请选择" class="select" size="medium">
                <el-option
                  v-for="item in resourceOptions"
                  :key="item.index"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="12" :sm="12" :md="6">
            <el-form-item label="公司名称" style="margin-bottom: 5px;">
               <el-input v-model="searchData.companyName" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="flag" id="cm-icon"><cm-icon class="icon-down" @click="handleDown" /></div>
      <div v-show="!flag" id="cm-icon"><cm-icon class="icon-up" @click="handleUp" /></div>
    </div>
    <div ref="ref2" :class="tableOption.isShowOperate?'table-box':'table-box2'">
      <div class="btn">
        <el-button icon="el-icon-plus" v-show="tableOption.isShowOperate" type="primary" size="small" @click="handleShowDialog">新建任务</el-button>
      </div>
      <tableComponent class="table"
        :height="height"
        :data="tableData || []"
        :columns="PRtableColumns"
        @change="tablePage"
        :table-option="tableOption"
        :page-option="searchData.page"
        :total="total">
        <template scope="scope">
          <el-button :disabled="scope.scope.row.taskSubStatus == '5'" @click="handleTask(scope.scope.row)" type="text" size="mini">处理</el-button>
          <el-button :disabled="scope.scope.row.taskSubStatus == '5'" @click="handleClosed(scope.scope.row)" type="text" size="mini">关闭</el-button>
          <el-button :disabled="scope.scope.row.taskSubStatus == '5'" @click="handleTaskMove(scope.scope.row)" type="text" size="mini">移交</el-button>
        </template>
      </tableComponent>
    </div>
    <el-dialog title="新建任务" :visible.sync="dialogVisible" width="50%" :before-close="handleCancleAddTask">
      <el-form ref="form" :model="addForm" :rules="rules" label-width="250px" style="padding: 0 30px 0 0">
        <el-form-item label="是否有决策支持文件(用于智能取数)" prop="region">
          <el-select v-model="addForm.region" @change="handleIfFile" class="select">
            <el-option label="有决策支持文件" value="Y"></el-option>
            <el-option label="无决策支持文件" value="N"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="!ifFile">
          <el-form-item label="决策支持文件">
            <el-upload
              ref="upload"
              action=""
              :file-list="fileList"
              :auto-upload="false"
              :on-change="addFile"
              :limit="1"
              :on-exceed="handleExceed">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="附件" prop="delivery">
            <el-upload
              ref="uploadAnnex"
              action=""
              :file-list="annexFile"
              :on-change="addAnnexFile"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item> -->
        </template>
        <template v-if="ifFile">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="addForm.taskName" class="select"></el-input>
          </el-form-item>
          <el-form-item label="产权经济事项" prop="economicItem">
            <el-cascader
              v-model="addForm.economicItem"
              class="select"
              :options="thingsOptions"
              @change="handleChange"
              :props="props"
            ></el-cascader>
          </el-form-item>
          <!-- <el-form-item label="任务类型" prop="taskType">
            <el-select v-model="addForm.taskType" class="select">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item v-if="basicForm" label="公司名称" prop="companyName">
            <el-input v-if="!ifNewCompany" v-model="addForm.companyName" class="select"></el-input>
            <el-select
              v-if="ifNewCompany"
              v-model="addForm.companyName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              class="select">
              <el-option
                v-for="item in hasCompanyOption"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="fenli1">
            <el-form-item :label="formTitle" prop="companyName">
              <el-select v-model="addForm.companyName" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" class="select">
                <el-option v-for="item in hasCompanyOption" :key="item.value" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="formTitle2" prop="companyNameList">
              <el-select class="select" v-model="addForm.companyNameList" multiple filterable allow-create placeholder="请输入新立公司名称">
                <el-option v-for="item in newCompanyOption" :key="item.value" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="hebing1">
            <el-form-item v-if="xinshehb" label="新设公司" prop="companyName">
              <el-input v-model="addForm.companyName" class="select"></el-input>
            </el-form-item>
            <el-form-item v-if="xishouhb" label="吸收公司" prop="companyName">
              <el-select v-model="addForm.companyName" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" class="select">
                <el-option v-for="item in hasCompanyOption" :key="item.value" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="被合并公司" prop="companyNameList">
              <el-select v-model="addForm.companyNameList" filterable remote multiple reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" class="select">
                <el-option v-for="item in hasCompanyOption" :key="item.value" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <el-form-item label="无决策文件附件" prop="delivery">
            <el-upload
              ref="uploadAnnexNoFile"
              action=""
              :file-list="annexNoFile"
              :on-change="addAnnexFileNo"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item> -->
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancleAddTask">取 消</el-button>
        <el-button type="primary" @click="handleAddTask('form')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="任务移交" :visible.sync="dialogVisibleTaskMove" width="70%">
      <div ref="taskmove" class="task-move">
        <div class="search-bar">
          <el-form :model="dialogSearchData" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名" style="margin-bottom: 5px;">
                  <el-input v-model="dialogSearchData.userName" size="medium"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司" style="margin-bottom: 5px;">
                  <el-input v-model="dialogSearchData.companyName" size="medium"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="margin-top: 5px;">
                <el-button type="primary" size="small" @click="taskMoveSearch">查询</el-button>
                <el-button size="small" @click="taskMoveClear">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <tableComponent class="table"
          :height="heightTaskMove"
          :data="taskMoveTableData || []"
          :columns="taskMoveTableColumns"
          @change="taskMovetablePage"
          :table-option="taskMovetableOption"
          :page-option="dialogSearchData.page"
          :total="taskMovetotal"
          @rowClick="handleRowClick"
        ></tableComponent>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTaskMove = false">取 消</el-button>
        <el-button type="primary" @click="TaskMoveSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableComponent from '@/components/Table/table'
import { PRtableColumns, taskMoveTableColumns } from './index.js'
import { queryTaskSub, taskStatus, addTaskFile, addTaskFileNo, economicItem, taskResource, transferTask, taskClose, queryUserRole, queryRegisterTypeOa, queryTaskFiles } from '@/api/modules/taskCenter.js'
import { queryCompanyByName } from '@/api/modules/propertyRight.js'
export default {
  components: {
    tableComponent
  },
  watch: {
    screenWidth: {
      handler(val) {
        this.windowWidth(val)
      },
      immediate: true
    }
  },
  data() {
    return {
      searchData: {
        taskName: '',
        taskSubStatus: '',
        date: '',
        applyCompany: '',
        resource: '',
        companyName: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      showDown: true,
      height: null,
      PRtableColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '140px'
      },
      total: 0,
      taskSubStatusOption: [],
      resourceOptions: [],
      dialogVisible: false,
      addForm: {
        taskName: '',
        companyName: '',
        region: 'Y',
        resource: '0',
        // taskType: '0',
        economicItem: '',
        companyNameList: []
      },
      ifFile: false,
      // typeOptions: [{ value: '产权任务', code: '0'}],
      thingsOptions: [],
      props: {
        label: 'value',
        value: 'code',
        children: 'child'
      },
      fileList: [], // 决策文件
      // annexFile: [], // 附件
      // annexNoFile: [],
      allUploadFile: [],
      rules: {
        region: [{ required: true, message: '请选择是否有决策支持文件', trigger: 'change' }],
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'change' }],
        economicItem: [{ required: true, message: '请选择产权经济事项', trigger: 'change' }],
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'change' }],
        companyNameList: [{ required: true, message: '请输入公司名称选择或新增', trigger: 'change' }]
      },
      hasCompanyOption: [],
      newCompanyOption: [],
      formTitle: '',
      formTitle2: '',
      basicForm: false,
      fenli1: false,
      ifNewCompany: true,
      hebing1: false,
      xinshehb: false,
      xishouhb: false,
      // 任务移交弹窗参数=================
      dialogVisibleTaskMove: false,
      heightTaskMove: null,
      taskMoveTableData: [],
      taskMoveTableColumns,
      taskMovetableOption: {
        isShowOperate: false,
        // isMultiSelect: true
      },
      taskMovetotal: 0,
      dialogSearchData: {
        userName: '',
        companyName: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      saveTaskMoveRow: {
        handleCompany: '',
        handleUser: '',
        taskSubId: ''
      },
      flag: true,
      screenWidth: document.documentElement.clientWidth
    }
  },
  mounted() {
    // 判断用户权限
    const key = this.$store.state.key.resourceCode
    if (key === '0') {
      this.tableOption.isShowOperate = false
    } else {
      this.tableOption.isShowOperate = true
    }
    this.$nextTick(() => {
      this.height = this.$refs.ref2.offsetHeight - 60
      console.log(this.height)
    })
    const that = this
    window.onresize = () => {
      that.height = this.$refs.ref2.offsetHeight - 60
      const val = document.documentElement.clientWidth
      that.screenWidth = val
    }
    this.initData(this.searchData)
    this.queryOption()
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    initData(params) {
      queryTaskSub(params).then(res => {
        if (res.data.code === '200') {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        }
      })
    },
    queryOption() {
      taskStatus().then(res => {
        this.taskSubStatusOption = res.data.body
      })
      taskResource().then(res => {
        this.resourceOptions = res.data.body
      })
    },
    // 查询
    handleSearch() {
      this.initData(this.searchData)
    },
    // 表格分页
    tablePage(val) {
      this.searchData.page = val
      this.initData(this.searchData)
    },
    // 重置
    handleClear() {
      this.searchData.taskName = ''
      this.searchData.taskSubStatus = ''
      this.searchData.date = ''
      this.searchData.applyCompany = ''
      this.searchData.resource = ''
      this.searchData.companyName = ''
    },
    // 新增任务
    handleShowDialog() {
      this.dialogVisible = true
      this.basicForm = false
      this.fenli1 = false
      this.ifNewCompany = true
      this.hebing1 = false
      this.xinshehb = false
      this.xishouhb = false
      this.ifFile = false
      this.addForm.taskName = ''
      this.addForm.companyName = ''
      this.addForm.region = 'Y'
      this.addForm.resource = '0'
      this.addForm.economicItem = ''
      this.addForm.companyNameList = []
      economicItem().then(res => {
        this.thingsOptions = this.getTreeData(res.data.data[0].child)
      })
    },
    getTreeData(data) {
      for (let i=0; i<data.length; i++) {
        if (data[i].child.length<1) {
          // children若为空数组，则将children设为undefined
          data[i].child = null
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    // 是否有决策支持文件
    handleIfFile(val) {
      if (val === 'Y') {
        this.ifFile = false
        this.$refs.form.clearValidate()
      } else {
        this.ifFile = true
        this.$refs.form.clearValidate()
      }
    },
    // 产权经济事项级联选择器
    handleChange(data) {
      console.log(data)
      this.addForm.economicItem = data[1]
      this.addForm.companyName = ''
      this.addForm.companyNameList = []
      if (data[0] == '01') {
        this.basicForm = true
        this.ifNewCompany = false
        this.fenli1 = false
        this.hebing1 = false
      } else {
        this.basicForm = true
        this.ifNewCompany = true
      }
      if (data[1] == '10') {
        this.fenli1 = true
        this.basicForm = false
        this.hebing1 = false
        this.formTitle = '存续公司'
        this.formTitle2 = '新立公司'
      } else if (data[1] == '11') {
        this.fenli1 = true
        this.basicForm = false
        this.hebing1 = false
        this.formTitle = '解散公司'
        this.formTitle2 = '新立公司'
      } else if (data[1] == '07') {
        this.fenli1 = false
        this.basicForm = false
        this.hebing1 = true
        this.xinshehb = true
        this.xishouhb = false
      } else if (data[1] == '08') {
        this.fenli1 = false
        this.basicForm = false
        this.hebing1 = true
        this.xinshehb = false
        this.xishouhb = true
      } else if (data[1] == '02') {
        this.fenli1 = false
        this.hebing1 = false
        this.basicForm = true
        this.ifNewCompany = false
      } else if (data[1] == '03') {
        this.fenli1 = false
        this.hebing1 = false
        this.basicForm = true
        this.ifNewCompany = false
      } else {
        this.fenli1 = false
        this.hebing1 = false
        this.basicForm = true
        this.ifNewCompany = true
        this.xinshehb = false
        this.xishouhb = false
      }
    },
    // 决策文件
    addFile(file, fileList) {
      this.allUploadFile.unshift(file)
      this.fileList = fileList
    },
    remoteMethod(query) {
      if (query !== '') {
        const data = {
          chiName: query
        }
        queryCompanyByName(data).then(res => {
          if (res.data.code === '0') {
            this.hasCompanyOption = res.data.body
          }
        })
      } else {
        this.hasCompanyOption = []
      }
    },
    // 有决策文件附件
    // addAnnexFile(file, annexFile) {
    //   this.allUploadFile.push(file)
    //   this.annexFile = annexFile
    // },
    // 无决策文件附件
    // addAnnexFileNo(file, annexNoFile) {
    //   this.annexNoFile = annexNoFile
    // },
    // 文件数量超出限制时
    handleExceed(files, fileList) {
      this.$message.error('限制选择1个文件')
    },
    // 点击取消新建任务
    handleCancleAddTask() {
      this.addForm.region = 'Y'
      this.resetForm('form')
      this.dialogVisible = false
      this.fileList = []
      // this.annexFile = []
      // this.annexNoFile = []
      // this.allUploadFile = []
    },
    // 点击保存新建任务
    handleAddTask(formName) {
      if (this.addForm.region === 'Y') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const formFile = new FormData()
            this.allUploadFile.forEach(item => {
              formFile.append('files', item.raw)
            })
            addTaskFile(formFile).then(res => {
              if (res.data.code === '200') {
                this.fileList = []
                this.annexFile = []
                this.dialogVisible = false
                this.$message,success('新增成功')
                this.initData(this.searchData)
              }
            })
          } else {
            return false
          }
        })
      } else if (this.addForm.region === 'N') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // const formFile = new FormData()
            // this.annexNoFile.forEach(item => {
            //   formFile.append('files', item.raw)
            // })
            // formFile.append('companyName', params.companyName)
            // formFile.append('economicItem', params.economicItem)
            // formFile.append('taskName', params.taskName)
            // formFile.append('taskType', params.taskType)
            // formFile.append('resource', params.resource)
            if (this.addForm.taskName === '') {
              this.$message.error('请输入任务名称')
            } else {
              addTaskFileNo(this.addForm).then(res => {
                if (res.data.code === '200') {
                  this.resetForm('form')
                  // this.annexNoFile = []
                  this.dialogVisible = false
                  this.$message.success('新增成功')
                  this.initData(this.searchData)
                } else {
                  this.$message.error(res.data.message)
                }
              })
            }
          } else {
            return false
          }
        })
      }
    },
    // 任务移交查询
    taskMoveQuery() {
      queryUserRole(this.dialogSearchData).then(res => {
        if (res.data.code === '200') {
          this.taskMoveTableData = res.data.data.list
          this.taskMovetotal = res.data.data.total
        }
      })
    },
    // 点击任务移交出现弹窗
    handleTaskMove(row) {
      this.saveTaskMoveRow.taskSubId = row.taskSubId
      this.dialogVisibleTaskMove = true
      this.$nextTick(() => {
        this.heightTaskMove = this.$refs.taskmove.offsetHeight - 80
      })
      this.taskMoveQuery()
    },
    // 点击确定移交任务
    TaskMoveSubmit() {
      transferTask(this.saveTaskMoveRow).then(res => {
        if (res.data.code === '200') {
          this.dialogVisibleTaskMove = false
          this.$message.success('任务移交成功')
          this.initData(this.searchData)
        }
      })
    },
    // 任务移交弹窗查询
    taskMoveSearch() {
      this.taskMoveQuery()
    },
    // 任务移交弹窗重置
    taskMoveClear() {
      this.dialogSearchData.companyName = ''
      this.dialogSearchData.userName = ''
    },
    handleRowClick(row) {
      this.saveTaskMoveRow.handleCompany = row.companyName
      this.saveTaskMoveRow.handleUser = row.userName
    },
    // 任务移交弹窗分页
    taskMovetablePage(val) {
      this.dialogSearchData.page = val
      this.taskMoveQuery()
    },
    // 任务关闭
    handleClosed(row) {
      this.$prompt('请输入关闭原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const params = {
          taskSubId: row.taskSubId,
          handleCompany: row.handleCompany,
          handleUser: row.handleUser,
          taskSubStatus: row.taskSubStatus,
          closeReason: value
        }
        taskClose(params).then(res => {
          if (res.data.code === '200') {
            this.$message.success('关闭成功')
            this.initData(this.searchData)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消关闭'
        })  
      })
    },
    // 产权处理
    handleTask(row) {
      console.log(row)
      const obj = {
        taskId: row.taskId
      }
      queryTaskFiles(obj).then(res =>{
        const arr = {
          url: {}
        }
        arr.url = res.data.data
        const data = {
          companyName: row.companyName,
          taskId: row.taskSubId
        }
        queryRegisterTypeOa(data).then(res => {
          if (res.data.body.flag === '1') {
            const query = Object.assign(row, res.data.body, arr)
            console.log(query)
            this.$router.push({ path: '/propertyRightAdd', query})
          } else if (res.data.body.flag === '0') {
            const query = Object.assign(row, res.data.body, arr)
            console.log(query)
            this.$router.push({ path: '/propertyRightEdit', query })
          }
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleDown() {
      if(this.screenWidth < 992){
        this.$nextTick(() => {
          this.$refs.searchBar.style.height = 'auto'
          this.$refs.ref2.style.height = 'calc(100vh - 345px)'
          this.height = this.$refs.ref2.offsetHeight - 60
        })
      }
      if (this.tableOption.isShowOperate) {
        this.$refs.ref2.style.height = 'calc(100vh - 255px)'
        this.height = this.$refs.ref2.offsetHeight - 60
        this.$refs.searchBar.style.height = 'auto'
        this.flag = false
      } else {
        this.$refs.ref2.style.height = 'calc(100vh - 223px)'
        this.height = this.$refs.ref2.offsetHeight - 60
        this.$refs.searchBar.style.height = 'auto'
        this.flag = false
      }
    },
    handleUp() {
      if (this.screenWidth < 992) {
        this.$nextTick(() => {
          this.$refs.searchBar.style.height = '85'+'px'
          this.$refs.ref2.style.height = 'calc(100vh - 240px)'
          this.height = this.$refs.ref2.offsetHeight - 60
        })
      }
      if (this.tableOption.isShowOperate) {
        this.$refs.searchBar.style.height = '45'+'px'
        this.$refs.ref2.style.height = 'calc(100vh - 200px)'
        this.height = this.$refs.ref2.offsetHeight - 60
        this.flag = true
      } else {
        this.$refs.searchBar.style.height = '45'+'px'
        this.$refs.ref2.style.height = 'calc(100vh - 168px)'
        this.height = this.$refs.ref2.offsetHeight - 60
        this.flag = true
      }
    },
    windowWidth(val) {
      if (val < 992) {
        this.$nextTick(() => {
          this.$refs.searchBar.style.height = '85'+'px'
          this.$refs.ref2.style.height = 'calc(100vh - 240px)'
        })
      } else {
        this.$nextTick(() => {
          this.$refs.searchBar.style.height = '45'+'px'
          this.$refs.ref2.style.height = 'calc(100vh - 200px)'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: 100%;
    .search-bar {
      width: calc(100% - 60px);
      height: 45px;
      overflow: hidden;
      background-color: #ffffff;
      padding: 10px 30px;
      margin-bottom: 10px;
      position: relative;
      #cm-icon {
        position: absolute;
        bottom: -3px;
        left: 45%;
      }
    }
    .table-box {
      width: 100%;
      height: calc(100vh - 200px);
      background-color: #ffffff;
      .table {
        height: 100%;
      }
      .btn {
        padding: 10px 20px;
      }
    }
    .table-box2 {
      width: 100%;
      height: calc(100vh - 168px);
      background-color: #ffffff;
      .table {
        height: 100%;
      }
      .btn {
        padding: 10px 20px;
      }
    }
    .select {
      width: 100%;
    }
    .task-move {
      height: 50vh;
    }
  }
</style>
<style>
  .el-cascader-menu__list {
    padding: 18px 0 !important;
  }
</style>
